<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>首页</title>
</head>
<body>
<div>
	<table>
		<tr>
			<td>用户名</td>
			<td>
				<input type="text"  id="username" value="root" />
				<span id="existMsg"></span>
			</td>
		</tr>
		<tr>
			<td>密码</td>
			<td><input type="password" id="password"/></td>
		</tr>
		<tr>
			<td><a href="javascript:void(0)" id="loginBtn">登录</a></td>
			<td><a href="http://localhost:8080/reg.html">注册</a></td>
		</tr>
	</table>
	<p id="loginErrMsg"></p>
</div>
<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(function(){

		$("#loginBtn").click(function(){
			$.ajax({
				url:"http://localhost:8080/login",
				type:"post",
				data:{
					"username":$("#username").val(),
					"password":$("#password").val()
				},
				success:function(res){
					var result = JSON.parse(res);
					if(result.status == 200){
						window.location.href = "http://localhost:8080/empbypage";
					}else{
						$("#loginErrMsg").css("color","red").text(result.msg);
					}
				}
			})
		})

		$("#username").blur(function(){
			$.ajax({
				url:"http://localhost:8080/userexist",
				type:"post",
				data:{
					"username":$("#username").val()
				},
				success:function(res){
					var result = JSON.parse(res);
					if(result.status == 201){
						$("#existMsg").css("color","green").text(result.msg);
					}else{
						$("#existMsg").css("color","red").text(result.msg);
					}
				}
			})
		})
	})
</script>
</body>
</html>
